<template>
    <section class="code-box-meta">
        <div class="code-box-title">
            <span>{{ title }}</span>
        </div>
        <div class="code-box-description">
            <a-row type="flex">
                <a-col flex="1">
                    <a-form layout="inline" :model="coils" style="justify-content: space-between;">
                        <a-form-item label="从机地址">
                            <a-input-number size="small" :min="1" class="min-num" v-model:value="coils.id" />
                        </a-form-item>
                        <a-form-item label="寄存器地址">
                            <a-input-number size="small" :min="0" class="min-num" v-model:value="coils.start"/>
                        </a-form-item>
                        <a-form-item label="寄存器长度" v-if="!checked">
                            <a-input-number size="small" :min="1" class="min-num" v-model:value="coils.len"/>
                        </a-form-item>
                        <a-form-item label="寄存器状态" v-else>
                            <a-switch style="width:66px;" v-model:checked="coils.state" checked-children="开" un-checked-children="关" />
                        </a-form-item>
                        <a-form-item>
                            <a-button size="small" type="primary" @click="submit">读取</a-button>
                        </a-form-item>
                    </a-form>
                </a-col>
            </a-row>

            <a-form layout="inline" v-if="showResult">
                <a-form-item label="输出">
                    <span class="ant-form-text">
                        {{ result }}
                    </span>
                </a-form-item>
            </a-form>

        </div>
    </section>
</template>

<script>
export default {
    props: {
        result: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        checked: { 
            type: Boolean,
            default: false
        },
        showResult: { 
            type: Boolean,
            default: true
        },
    },
    data () {
        return {
            coils: { 
                id: 1,
                start: 0,
                len: 2,
                state: true
            },
        }
    },
    methods: {
        async submit () {
            this.$emit('submit', this.coils)
        }
    }
}
</script>

<style scoped>
.min-num{
    width: 68px;
}
.min-num :deep(.ant-input-number-input){
    text-indent: 10px;
}

</style>